import React, { FC, ReactElement } from 'react';
import { ITodo } from '../../../../types/todo';

interface IProps{
  todo:ITodo,
  removeTodo:(id:number)=>void,
  completeTodo:(id:number)=>void
}
const TodoListItem:FC<IProps> = ({
  todo,removeTodo,completeTodo
}):ReactElement => {

  const {id,content,completed} = todo
  console.log(completed)
  return (
    <div className='todo-list-item'>
        <input 
          type="checkbox" 
          checked={completed}
          onChange={()=>completeTodo(id)}
        />
        <span 
          style={{textDecoration: completed ? "line-through" : "none"}}
        >
          {content}
        </span>
        <button onClick={()=>removeTodo(id)}>删除</button>
    </div>
  )
}

export default TodoListItem;